<template>
  <div class="per-department-con">
    <TableWrap>
      <template #headerLeft>
        <a-space>
          <FilterTable :isShowTag="false" :filterItem="filterItem" @search="searchByVal" />
          <a-button type="primary" size="medium" @click="show = true">添加部门</a-button>
          <a-button class="gray-outline" @click="removeUser('mul')">批量移除</a-button>
        </a-space>
      </template>
      <template #tableBody>
        <a-table class="table-singe-line show-border-table" :row-selection="{ type: 'checkbox', showCheckedAll: true, onlyCurrent: false }" row-key="id" v-model:selectedKeys="ids" :data="tableList" size="mini" :pagination="false">
          <template #columns>
            <a-table-column title="部门" :width="500" #cell="{ record }"></a-table-column>
            <a-table-column title="授权总人数" :width="100" #cell="{ record }"></a-table-column>
            <a-table-column title="操作" :width="40" #cell="{ record }">
              <a-button type="text" @click="removeUser('single', record)">移除</a-button>
            </a-table-column>
          </template>
        </a-table>
      </template>
    </TableWrap>
  </div>
  <addPerForDepartment v-if="show" v-model="show" />
</template>

<script lang="ts" setup>
  import { defineComponent, ref } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import TableWrap from '@/components/TableWrap.vue'
  import FilterTable from '@/components/TableFilter.vue'
  import addPerForDepartment from './addPerForDepartment.vue'
  const filterItem: any = ref([
    {
      key: 'keywords',
      label: '部门',
      value: ref(),
      type: 'input_search',
      width: 260,
    },
  ])

  let searchValue = ref({})
  let tableList = ref([{}])
  let ids = ref([])
  let showChooseUserDialog = ref(false)
  let show = ref(false)
  const searchByVal = (val: any) => {
    searchValue.value = val
  }
  const removeUser = (type: any, info?: any) => {
    if (type == 'mul' && ids[0]) {
      return Message.error('请选择需要操作的数据')
    }
    Modal.info({
      title: '移除确认',
      content: '请再次确认，把选中部门从该权限中移除？',
      titleAlign: 'start',
      hideCancel: false,
      async onBeforeOk(done) {},
    })
  }
</script>

<style lang="less" scoped>
  .per-department-con {
    padding: 10px;
    box-sizing: border-box;
  }
</style>
